<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Material Design Bootstrap</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">

    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body class="fixed-sn blue-skin">

<!--Navigation导航-->
<header>
     <!-- SideNav slide-out button
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
    <!--/. SideNav slide-out button -->

    <!-- Sidebar navigation 侧边导航栏-->
    <ul id="slide-out" class="side-nav fixed default-side-nav ">

        <!-- Logo -->
        <div class="logo-wrapper waves-light">
            <a href="#"><img src="https://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png" class="img-fluid flex-center"></a>
        </div>
        <!--/. Logo -->

        <!--Search Form-->
        <form class="search-form" role="search">
            <div class="form-group waves-effect">
                <input type="text" class="form-control" placeholder="Search">
            </div>
        </form>
        <!--/.Search Form-->

        <!-- Side navigation links -->
        <ul class="collapsible collapsible-accordion">
            <li><a class="collapsible-header waves-effect">Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a class="collapsible-header waves-effect">Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a class="collapsible-header waves-effect">Click me</a>
                <div class="collapsible-body">
                    <ul>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                        <li><a href="#" class="waves-effect">Link</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <!--/. Side navigation links -->
    </ul>
    <!--/. Sidebar navigation -->

    <!--Navbar 头部导航栏-->
    <nav class="navbar navbar-fixed-top scrolling-navbar double-nav">

    <!-- SideNav slide-out button -->
    <div class="pull-left">
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
    </div>

    <!-- Breadcrumb-->
    <div class="breadcrumb-dn">
        <p>Material Design for Bootstrap</p>
    </div>

    <ul class="nav navbar-nav pull-right">

        <li class="nav-item ">
            <a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
        </li>
        <li class="nav-item ">
            <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
        </li>
        <li class="nav-item ">
            <a class="nav-link"><i class="fa fa-user"></i> <span class="hidden-sm-down">Account</span></a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Profile</a>
            <div class="dropdown-menu dropdown-primary dd-right" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>
    </ul>

    </nav>
    <!--/.Navbar-->

</header>
<!--/Navigation导航-->

<!-- 主页面布局-->
<main>
    <div class="main-wrapper"> <!-- 主要装饰器 -->
        <div class="container-fluid"> <!-- 全宽布局 -->

            <!--Main carousel 轮播图-->

            <!--/.Main carousel-->

            <h5 class="section-title st-mdb">Bestsellers
                <small>Secondary text</small>
            </h5>

            <!--Featured cards 特色卡-->
            <div class="row"> <!-- 栅格系统 -->

                <!--First column 第一列-->
                <div class="col-md-4">

                </div>
                <!--/First column-->

                <!--Second column 第二列-->
                <div class="col-md-4">

                </div>
                <!--/Second column-->

                <!--Third column 第三列-->
                <div class="col-md-4">

                </div>
                <!--/Third column-->
            </div>
            <!--/Featured cards-->

            <h5 class="section-title st-mdb">Collections <!-- 次级文本 -->
                <small>Secondary text</small>
            </h5>

            <!--Collections--> <! -- 收藏 -- >
            <div class="row">
                <!--First column-->
                <div class="col-md-3">

                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-3">

                </div>
                <!--/Second column-->

                <!--Third column-->
                <div class="col-md-3">

                </div>
                <!--/Third column-->

                <!--Fourth column-->
                <div class="col-md-3">

                </div>
                <!--/Fourth column-->
            </div>
            <!--/Collections-->

            <h5 class="section-title st-mdb">Additional cards
                <small>Secondary text</small>
            </h5>

            <!--Additional cards-->
            <div class="row">
                <!--First column-->
                <div class="col-md-6">

                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-6">

                </div>
                <!--/Second column-->
            </div>
            <!--/Additional cards-->

            <h5 class="section-title st-mdb">Products carousel
                <small>Secondary text</small>
            </h5>

            <!--Products carousel-->
            <div class="row">

            </div>
            <!--/Products carousel-->

            <h5 class="section-title st-mdb">Blog
                <small>Secondary text</small>
            </h5>

            <!--Blog card-->
            <div class="row">
                <!--First column-->
                <div class="col-md-4">

                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-4">

                </div>
                <!--/Second column-->

                <!--Third column-->
                <div class="col-md-4">

                </div>
                <!--/Third column-->
            </div>
            <!--/Blog card-->

        </div>
    </div>
</main>
<!-- /.主页面布局-->

<!--页脚-->
<footer>
</footer>
<!--/页脚-->


<!-- SCRIPTS -->

<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
    // SideNav Init 侧边栏初始化
    $(".button-collapse").sideNav();
</script>

</body>

</html>